30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

Youtube 連結：https://www.youtube.com/watch?v=GE3vrnx91xg

在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。

今天這一集，我想與大家分享一個在前幾天我追蹤原始碼時發現的小東西，它叫做 indexHtmlMiddleware。這個中介軟體究竟是做什麼的呢？讓我們一起來看看。

在一個全新的空白專案中，當我們對這個專案進行更改並保存時，瀏覽器如何立即更新。這看似神奇，但實際上，對於 2023 年的開發者來說，這已經不再神奇。但是，我們要討論的是，這是如何實現的？

Vite 啟動的時候使用了不少中介軟體裡，其中有一個 indexHtmlMiddleware 會在啟動過程中偷偷地將一行原始碼添加到我們的 HTML 文件中。這會啟動 WebSocket 與 Vite 開發伺服器的連接，當我們對原始碼進行更改並存檔時，瀏覽器能夠接收到更新的訊息。

若各位有其他關於 Vite 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下集見！